/** @type {import('tailwindcss').Config} */

import plugin from "tailwindcss/plugin";
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: "selector",
  // presets: [],//禁用所有默认配置
  theme: {
    extend: {
      display: ['responsive', 'group-hover', 'group-focus'],
      // 扩展默认主题
      fontSize: {
        zks: "30px", // Adds a new `font-display` class
      },
      screens: {
        small: "300px", // Adds a new `3xl:` screen variant
      },
      backgroundColor: {
        "red-500": "black",
      },
      
    },
    letterSpacing:{
      widest:'3em'
    },
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }

      md: "768px",
      // => @media (min-width: 768px) { ... }

      lg: "800px",
      // => @media (min-width: 1024px) { ... }

      xl: "1280px",
      // => @media (min-width: 1280px) { ... }

      "2xl": "1536px",
      // => @media (min-width: 1536px) { ... }
    },
  },
  plugins: [
    plugin(function ({addComponents,theme}) {
      addComponents({
        ".card": {
          backgroundColor: theme("colors.red.500"),
          borderRadius: theme("borderRadius.full"),
          padding: theme("spacing.6"),
          boxShadow: theme("boxShadow.xl"),
          marginTop: theme('spacing.1'),
          letterSpacing:theme('letterSpacing.widest'),
          display:'block',
          width:theme('width.full')
        },
      });
    }),
  ],
  
  // 与饿了么冲突
  corePlugins: {
    preflight: false,
  },
};
